<template>
  <a-spin :spinning="loading">
    <div class="page page-miH page-bgBack">
      <div class="headerBox">
        <a-month-picker :size="size" :allowClear="false" placeholder="选择月份" @change="monthChange" v-model="now">
          <span style="font-size:16px;font-weight: 500;color: #3C3D43;cursor: pointer;"
            ><a-icon type="calendar" class="iconStyle" />{{
              now ? moment(now).format("YYYY") + "年" + moment(now).format("MM") + "月劳务费结算" : "劳务费结算"
            }}
            <a-icon type="caret-down" style="color:rgba(0, 0, 0, 0.4)" />
          </span>
        </a-month-picker>
        <div style="color:#767885;margin-left:20px;">{{ typeValueTime === 1 ? "全部分组" : "部分分组" }}</div>
        <div style="margin-left:10px;" class="settingcolor" @click="setGroupPanel">设置</div>
      </div>
      <div style="display:flex;justify-content: space-between">
        <div class="fix-item-wrapper">
          <div class="fix-item-one">
            <p class="fix-item-name">合计</p>
          </div>
          <div class="fix-item-two">
            <div>
              <p class="childpProjectName">渠道总数</p>
              <p class="childContentName">
                {{ combined.channelCount !== null ? combined.channelCount : "--" }}
              </p>
            </div>
          </div>
        </div>
        <div class="fix-item-wrapper2">
          <div class="fix-item-two" style="border-right: 1px solid #e8e8e8;">
            <div>
              <p class="childpProjectName">渠道产生费用人数</p>
              <p class="childContentName">
                {{ combined.feePeopleCount !== null ? combined.feePeopleCount : "--" }}
                <span style="color:#A6A8B4;font-size:12px;margin-left:10px" v-if="combined.countChange">
                  较上月
                </span>
                <span v-if="combined.countChange > 0" style="color:#FF7085;font-size:12px;margin-left:5px">
                  <a-icon type="caret-up" />
                  {{ combined.countChange !== null ? combined.countChange : "--" }}
                </span>
                <span v-if="combined.countChange < 0" style="color:#32CCAA;font-size:12px;margin-left:5px">
                  <a-icon type="caret-down" />
                  {{ combined.countChange !== null ? -1 * combined.countChange : "--" }}
                </span>
              </p>
            </div>
          </div>
          <div class="fix-item-two">
            <div>
              <p class="childpProjectName">应付渠道费用总数</p>
              <p class="childContentName">
                ¥{{ combined.feeSum !== null ? combined.feeSum : "--" }}
                <span v-if="combined.sumChange" style="color:#A6A8B4;font-size:12px;margin-left:10px">
                  较上月
                </span>
                <span v-if="combined.sumChange > 0" style="color:#FF7085;font-size:12px;margin-left:5px">
                  <a-icon type="caret-up" />
                  {{ combined.sumChange !== null ? combined.sumChange : "--" }}
                </span>
                <span v-if="combined.sumChange < 0" style="color:#32CCAA;font-size:12px;margin-left:5px">
                  <a-icon type="caret-down" />
                  {{ combined.sumChange !== null ? -1 * combined.sumChange : "--" }}
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="operation">
        <a-input-search allow-clear class="mr12" placeholder="渠道名称/身份证号" style="width: 180px" @search="inputChange" />
        <div>
          <a-button style="margin-right:15px" :disabled="!selectedRowKeys.length" @click="() => download(1)">批量导出</a-button>
          <a-button style="margin-right:15px" type="primary" @click="showAdd">渠道结算</a-button>
          <a-button @click="() => download(2)">全部导出</a-button>
        </div>
      </div>
      <a-modal title="新增渠道结算" :visible="addVisible" @ok="handleOk" @cancel="handleCancel">
        <!-- <div style="margin-left:12px">

        </div> -->
        <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="劳务费结算月份">
            <span style="color:#000000;font-weight:500">{{
              now ? moment(now).format("YYYY") + "年" + moment(now).format("MM") + "月" : "--"
            }}</span>
          </a-form-model-item>
          <a-form-model-item ref="companyId" label="选择用工单位" prop="companyId">
            <a-tree-select
              placeholder="请选择"
              :filterTreeNode="false"
              @search="treeSearch"
              v-model="companyList"
              :tree-data="dataList2"
              :replaceFields="replaceFields2"
              labelInValue
              tree-checkable
            />
          </a-form-model-item>
        </a-form-model>
      </a-modal>

      <div class="tableBox">
        <a-table
          row-key="id"
          :columns="columns"
          :data-source="dataList"
          :pagination="pagination"
          @change="handleTableChange"
          :scroll="{ x: 1200 }"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
        >
          <template slot="channelGroupName" slot-scope="text">
            <span>{{ text === null || text === "null" ? "默认分组" : text }}</span>
          </template>
          <template slot="action" slot-scope="text, record">
            <span class="settingcolor" style="margin-right:15px;" @click="goDetail(record)">详情</span>
            <span class="settingcolor" @click="goDelete(record)">删除</span>
          </template>
        </a-table>
      </div>
      <a-modal title="设置分组范围" :visible="isConfirmPlan" width="680px" :destroy-on-close="true" @cancel="handleCancelGroup">
        <template slot="footer">
          <a-button @click="handleCancelGroup"> 取消 </a-button>
          <a-button key="submit" type="primary" @click="confirmOk">
            确认
          </a-button>
        </template>

        <div style="margin-bottom: 0px">
          <a-form>
            <a-form-item class="baseInfo-item2">
              <a-radio-group v-model="typeValueTime" @change="onTypeChangeValue">
                <a-radio :value="1"> 全部分组 </a-radio>
                <a-radio :value="2" style="margin-left: 30px"> 部分分组 </a-radio>
              </a-radio-group>
            </a-form-item>

            <div class="employee-selector-wrapper2" v-if="typeValueTime === 2">
              <div style="width:300px;">
                <div class="employee-selector-block">
                  <a-input-search
                    placeholder="请输入搜索内容"
                    style="width: 80%"
                    :defaultValue="querys"
                    allowClear
                    @search="searchPeople"
                  />
                </div>
                <div class="tree-item2">
                  <div v-show="treeData.length !== 0 && querys.length === 0">全选</div>

                  <i
                    v-if="isAllSelected"
                    @click="choseAll(treeData)"
                    style="font-size: 19px;margin-left: 10px;"
                    class="iconfont icon-check-circle-fill primary_color"
                    v-show="treeData.length !== 0 && querys.length === 0"
                  >
                  </i>
                  <img
                    v-show="treeData.length !== 0 && querys.length === 0"
                    v-else
                    @click="choseAll(treeData)"
                    src="@/assets/icons/未选择.png"
                    style="width: 18px; height: 18px; margin-left: 10px"
                  />
                </div>
                <div class="employee-selector">
                  <a-empty v-if="treeData.length === 0" style="margin-top: 100px" description="暂无人员" />
                  <div v-else v-for="(item, index) in treeData" :key="index" class="mg_t10">
                    <div class="tree-item" @click="chose(item, treeData)" v-if="item.show">
                      <span>
                        <img src="@/assets/icons/person1.png" style="width: 30px; height: 30px; margin-right: 10px" />
                        {{ item.name }}
                      </span>
                      <i
                        v-if="item.isSelected"
                        v-on:click.stop="chose(item, treeData)"
                        style="font-size: 19px"
                        class="iconfont icon-check-circle-fill primary_color"
                      >
                      </i>
                      <img
                        v-else
                        v-on:click.stop="chose(item, treeData)"
                        src="@/assets/icons/未选择.png"
                        style="width: 18px; height: 18px"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div class="employee-selector-block2">
                <div class="employee-selector-item2">
                  <div
                    style="display: flex;
                      flex-direction: row;font-weight:700"
                  >
                    <div>当前选中</div>
                    <div style="margin-left:6px;margin-right:6px;" class="settingcolor">{{ selectedListTemp.length }}</div>
                    <div>个分组</div>
                  </div>

                  <div class="settingcolor" @click="cleanT">清空</div>
                </div>

                <div class="employee-selector">
                  <div v-for="(item, i) in selectedListTemp" :key="i">
                    <div class="tree-item employee-selector-item">
                      <div>
                        <img src="@/assets/icons/person1.png" style="width: 30px; height: 30px; margin-right: 10px" />
                        {{ item.name }}
                      </div>
                      <img @click="deleteItem(item)" src="@/assets/icons/删除.png" style="width: 20px; height: 20px" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-form>
        </div>
      </a-modal>
    </div>
  </a-spin>
</template>
<script>
import { getFeeSum, getChannelFeeSettlement, deletChannelFeeSettlement } from "@/api/outsourcing/outsourcing";
import { findCompanyGroup, saveChannelSettlement, getChannelGroupsAll } from "@/api/company/contract";
const columns = [
  {
    title: "渠道名称",
    dataIndex: "channelName",
    key: "channelName",
    width: 160
  },
  {
    title: "身份证号",
    dataIndex: "idCard",
    key: "idCard",
    width: 200
  },
  {
    title: "所属分组",
    dataIndex: "channelGroupName",
    scopedSlots: { customRender: "channelGroupName" },
    key: "channelGroupName",
    width: 200
  },
  {
    title: "产生费用的人数",
    dataIndex: "feePeopleNumber",
    key: "feePeopleNumber",
    width: 150
  },
  {
    title: "工时抽成合计",
    dataIndex: "sumWorkTimeRake",
    key: "sumWorkTimeRake",
    width: 150
  },
  // {
  //   title: "一次性费用合计",
  //   dataIndex: "sumOneTimeFee",
  //   key: "sumOneTimeFee",
  //   width: 150
  // },
  {
    title: "一次性费用合计",
    dataIndex: "sumSpecialFee",
    key: "sumSpecialFee",
    width: 150
  },
  {
    title: "应付总费用合计",
    dataIndex: "sumTotalFee",
    key: "sumTotalFee",
    width: 150
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    scopedSlots: { customRender: "action" },
    width: 120
  }
];
import moment from "moment";
import axios from "axios";
import { mapGetters } from "vuex";
import { isContainByString } from "@/utils/index";
import qs from "qs";
export default {
  data() {
    return {
      lastSelect: [],
      selectedListTemp: [],
      isAllSelected: false,
      treeData: [],
      querys: "",
      isConfirmPlan: false,
      typeValueTime: 1,
      form: {},
      dataList: [],
      dataList2: [],
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      companyList: [],
      flatDataList: [],
      columns,
      size: "default",
      loading: false,
      selectedRowKeys: [],
      now: null,
      combined: {},
      nameOrIdCard: null,
      monthly: moment().format("MM"),
      yearly: moment().format("YYYY"),
      replaceFields2: {
        children: "companyList",
        title: "name",
        key: "uuid",
        value: "uuid"
      },
      addVisible: false,
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: total => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        personalPeriod: null,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      isContainByString
    };
  },
  created() {
    getChannelGroupsAll({})
      .then(res => {
        if (res.data) {
          this.treeData = res.data;
          this.treeData.map(item => {
            item.show = true;
          });
        }
      })
      .catch(err => {
        console.log("debug log --> ", err);
      });
    this.now = this.$route.query.index ? JSON.parse(this.$route.query.index) : moment(moment().format("YYYY-MM"), "YYYY-MM");

    this.getFeeSumDetail();
    this.findCompanyGroup();
    this.getFeeSumContentList();
  },
  computed: {
    ...mapGetters(["permissions_site"])
  },
  methods: {
    setGroupPanel() {
      this.isConfirmPlan = true;
    },
    deleteItem(item) {
      item.isSelected = false;
      this.spinning = true;
      var that = this;
      setTimeout(function() {
        that.ergodic(item);
      }, "10");
    },
    chose(item, data) {
      // // 减员单选逻辑
      // if (!this.zengyuan && !item.isSelected) {
      //   let id = "";
      //   var index2 = this.treeData.findIndex(it => it.isSelected === true); // 删除之前选择的，维持单选状态
      //   if (index2 !== -1) {
      //     this.treeData[index2].isSelected = false;
      //     id = this.treeData[index2].id;
      //   }

      //   index2 = this.selectedListTemp.findIndex(it => it.id === id); // 删除之前选择的，维持单选状态
      //   if (index2 !== -1) {
      //     this.selectedListTemp.splice(index2, 1); // 删除
      //     this.isAllSelected = false;
      //   }
      // }

      item.isSelected = !item.isSelected;

      this.onChange(item);
    },
    onChange(item) {
      this.spinning = true;
      var that = this;
      setTimeout(function() {
        that.ergodic(item);
        that.spinning = false;
      }, "10");
    },
    ergodic(item) {
      if (!item.isSelected) {
        var index = this.selectedListTemp.findIndex(it => it.id === item.id); // 存在再删除，防止删除错误
        if (index !== -1) {
          this.selectedListTemp.splice(index, 1); // 删除
          this.isAllSelected = false;
        }
      } else {
        if (this.selectedListTemp.findIndex(it => it.id === item.id) === -1) {
          // 不存在再添加，防止重复添加
          this.selectedListTemp.push(item);

          var count = this.treeData.length;
          var allSelect = true;
          for (var i = 0; i < count; i++) {
            if (!this.treeData[i].isSelected) {
              allSelect = false;
              break;
            }
          }
          this.isAllSelected = allSelect;
        }
      }
    },
    cleanT() {
      this.isAllSelected = false;
      var that = this;
      that.selectedListTemp = [];
      for (var j = 0, len = that.treeData.length; j < len; j++) {
        that.treeData[j].isSelected = false;
      }
    },
    choseAll(data) {
      this.isAllSelected = !this.isAllSelected;
      var that = this;
      for (var j = 0, len = data.length; j < len; j++) {
        data[j].isSelected = that.isAllSelected;
        that.ergodicAll(data[j]);
      }
    },

    ergodicAll(item) {
      if (!item.isSelected) {
        var index = this.selectedListTemp.findIndex(it => it.id === item.id); // 存在再删除，防止删除错误
        if (index !== -1) {
          this.selectedListTemp.splice(index, 1); // 删除
        }
      } else {
        if (this.selectedListTemp.findIndex(it => it.id === item.id) === -1) {
          // 不存在再添加，防止重复添加
          this.selectedListTemp.push(item);
        }
      }
    },
    searchPeople(query) {
      this.cleanT();

      this.querys = query;
      if (this.querys.length === 0) {
        // 显示宣布
        this.treeData.map(item => {
          item.show = true;
        });
      } else {
        // 根据条件显示
        this.treeData.map(item => {
          item.show = false;
        });
        this.treeData.map(item => {
          if (item.name.indexOf(this.querys) !== -1) {
            item.show = true;
          }
        });
      }
    },

    onTypeChangeValue(e) {
      this.typeValueTime = e.target.value;
      if (this.typeValueTime === 1) {
        // 保持原定参保时间
        // this.cleanT();
        // this.lastSelect = [];
      } else if (this.typeValueTime === 2) {
        // 批量更改参保时间
      }
    },
    confirmOk() {
      var a = [];
      a = this.getList();
      if (this.typeValueTime === 2 && a.length === 0) {
        this.$message.error("请选择分组");
        return;
      }
      this.getFeeSumDetail();
      this.getFeeSumContentList();
      this.isConfirmPlan = false;

      this.lastSelect = [];
      for (var i = 0; i < this.selectedListTemp.length; i++) {
        this.lastSelect.push(JSON.parse(JSON.stringify(this.selectedListTemp[i])));
      }

      console.log("=============");
      console.log(this.lastSelect);
    },
    treeSearch(e) {
      this.findCompanyGroup(e);
    },
    findCompanyGroup(e) {
      findCompanyGroup({ name: e || null })
        .then(res => {
          this.dataList2 = this.addTreeSlot(res.data);
          this.flatten(this.dataList2);
          this.companyList = JSON.parse(JSON.stringify(this.companyList));
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    addTreeSlot(data) {
      if (!data) {
        return [];
      }
      data.forEach(el => {
        el.scopedSlots = { title: "custom" };
        this.addTreeSlot(el.companyList);
      });
      return data;
    },
    // 递归处理为扁平数组
    flatten(list) {
      if (list !== null) {
        list.forEach(item => {
          this.flatDataList.push(item);
          this.flatten(item.companyList);
        });
      }
    },
    handleCancel(e) {
      this.addVisible = false;
      this.companyList = [];
      // if(!this.getConf){
      //   this.cleanT();
      // }
      //  this.getConf = false;
    },
    handleCancelGroup() {
      this.isConfirmPlan = false;

      if (this.typeValueTime === 2 && this.lastSelect.length === 0) {
        this.cleanT();
        this.typeValueTime = 1;
      }

      if (this.lastSelect.length !== 0) {
        for (var i = 0; i < this.treeData.length; i++) {
          this.treeData[i].isSelected = false;
          this.lastSelect.map(item => {
            if (this.treeData[i].id === item.id) {
              this.treeData[i].isSelected = true;
            }
          });
        }
        this.selectedListTemp = this.lastSelect;
      }
    },
    handleOk() {
      if (this.companyList && this.companyList.length > 0) {
        const companyArr = [];
        this.companyList.forEach(item => {
          this.flatDataList.forEach((item2, index2) => {
            if (item2.uuid && item2.uuid === item.value) {
              companyArr.push(item2.id);
            }
          });
        });
        saveChannelSettlement({
          companyIdList: companyArr,
          monthly: moment(this.now).format("MM"),
          yearly: moment(this.now).format("YYYY")
        })
          .then(res => {
            this.addVisible = false;
            this.$notification["success"]({
              message: "成功",
              description: "创建成功"
            });
            this.companyList = [];
            this.getFeeSumDetail();
            this.findCompanyGroup();
            this.getFeeSumContentList();
          })
          .catch(err => {
            console.log(err);
            this.companyList = [];
            this.addVisible = false;
          });
      } else {
        this.$notification["error"]({
          message: "错误",
          description: "请选择用工单位"
        });
      }
    },
    showAdd() {
      this.addVisible = true;
    },
    download(i) {
      const token = this.$store.state.auth.token;
      let siteName = "";
      this.permissions_site.forEach((item, index) => {
        if (item.currSite) siteName = item.name;
      });

      let data = {};
      if (i === 2) {
        data = {
          // 全部
          level: this.typeValueTime,
          monthly: moment(this.now).format("MM"),
          yearly: moment(this.now).format("YYYY")
        };
        if (this.typeValueTime === 2) {
          data.channelGroupIdList = this.getList();
        }
        if (this.nameOrIdCard) {
          data.nameOrIdCard = this.nameOrIdCard;
        }
      } else {
        // 批量
        console.log(this.selectedRowKeys);
        var idss = [];
        // this.selectedRowKeys.map(item => {
        //   idss += item + ",";
        // });
        idss = this.selectedRowKeys;
        data = {
          level: this.typeValueTime,
          ids: idss,
          monthly: moment(this.now).format("MM"),
          yearly: moment(this.now).format("YYYY")
        };
        if (this.typeValueTime === 2) {
          data.channelGroupIdList = this.getList();
        }
        if (this.nameOrIdCard) {
          data.nameOrIdCard = this.nameOrIdCard;
        }
      }
      axios({
        // url: `/salary/api/v1/channelFeeSettlements/export`,
        url: `/hr/api/v1/channelGroups/channelFeeSettlementExport`,
        data,
        paramsSerializer: param => {
          return qs.stringify(param, { indices: false });
        },
        method: "post",
        responseType: "blob",
        headers: {
          token: token
        }
      })
        .then(res => {
          if (res.data && res.data.type === "application/json") {
            const reader = new FileReader();
            reader.readAsText(res.data, "utf-8");
            reader.onload = () => {
              const resJson = JSON.parse(reader.result);
              this.$message.error(resJson.msg);
            };
          } else {
            const blob = new Blob([res.data], {
              type: "application/octet-stream"
            });
            const link = document.createElement("a");
            try {
              link.download = `${siteName}_` + "渠道劳务费详情" + ".xlsx";
            } catch (err) {
              console.log("debug log --> ", res);
            }
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          }
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    // 查询合计
    getFeeSumDetail() {
      getFeeSum({
        monthly: moment(this.now).format("MM"),
        yearly: moment(this.now).format("YYYY"),
        level: this.typeValueTime,
        channelGroupIdList: this.typeValueTime === 1 ? null : this.getList()
      }).then(res => {
        this.combined = res.data ? res.data : {};
      });
    },
    inputChange(e) {
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.nameOrIdCard = e;
      this.getFeeSumContentList();
    },
    // 查询详情
    getFeeSumContentList() {
      getChannelFeeSettlement({
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        monthly: moment(this.now).format("MM"),
        yearly: moment(this.now).format("YYYY"),
        level: this.typeValueTime,
        channelGroupIdList: this.typeValueTime === 1 ? null : this.getList(),
        nameOrIdCard: this.nameOrIdCard ? this.nameOrIdCard : null
      }).then(res => {
        if (res.data) {
          this.dataList = res.data.entities ? res.data.entities : [];
          this.pagination.total = res.data.entities && res.data.entityCount;
        } else {
          this.dataList = [];
          this.pagination.total = 0;
        }
      });
    },
    getList() {
      var arr = [];
      this.selectedListTemp.map(item => {
        arr.push(item.id);
      });
      return arr;
    },
    goDetail(e) {
      this.$router.push({
        path: this.isContainByString("settlementAdmin") ? "/settlementAdmin/labor/detail" : "/settlement/labor/detail",
        query: { detail: JSON.stringify(e), defaultTime: JSON.stringify(this.now) }
      });
    },
    goDelete(e) {
      deletChannelFeeSettlement(e.id).then(res => {
        this.getFeeSumDetail();
        this.findCompanyGroup();
        this.getFeeSumContentList();
      });
    },
    monthChange(e) {
      const query = JSON.parse(JSON.stringify(this.$router.history.current.query)); // 取当前路由query值并且深拷贝
      const path = this.$router.history.current.path; // 取当前路由地址
      query.index = JSON.stringify(e); // 修改变动的query值
      this.$router.push({ path, query }); // 改变query值
      this.monthly = moment(e).format("MM");
      this.yearly = moment(e).format("YYYY");
      this.getFeeSumDetail();
      this.getFeeSumContentList();
      console.log(this.monthly + "/" + this.yearly);
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getFeeSumContentList();
      // this.getEmpSelectPage();
    },
    onSelectChange(selectedRowKeys, selectedRow) {
      // this.selectedRowId = [];
      this.selectedRowKeys = selectedRowKeys;
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  padding: 25px;
  .headerBox {
    display: flex;
  }
  .fix-item-wrapper {
    width: 38%;
    display: flex;
    height: 120px;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 25px;
    padding: 33px;
    border: 1px solid #e8e8e8;
    display: flex;
    .childpProjectName {
      width: 100px;
      font-size: 14px;
      font-weight: 300;
      color: #9c9c9c;
    }
    .childContentName {
      display: flex;
      justify-content: space-between;
      font-size: 18px;
      font-weight: 500;
      color: #333333;
    }
    .fix-item-one {
      height: 40px;
      display: flex;
      align-self: center;
      padding-left: 40px;
      width: 50%;
      border-right: 1px solid #e8e8e8;
    }
    .fix-item-two {
      padding-left: 85px;
      margin-top: 10px;
      width: 50%;
      height: 45px;
      padding-right: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .fix-item-name {
      font-size: 18px;
      font-weight: 500;
      color: #222426;
      line-height: 28px;
    }
  }
  .fix-item-wrapper2 {
    width: 60%;
    display: flex;
    height: 120px;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 25px;
    padding: 33px;
    border: 1px solid #e8e8e8;
    display: flex;
    .childpProjectName {
      font-size: 14px;
      font-weight: 300;
      color: #9c9c9c;
    }
    .childContentName {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 500;
      color: #333333;
    }
    .fix-item-two {
      padding-left: 85px;
      margin-top: 10px;
      width: 50%;
      height: 45px;
      padding-right: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .fix-item-name {
      font-size: 18px;
      font-weight: 500;
      color: #222426;
      line-height: 28px;
    }
  }
  .operation {
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
  }
  // .tableBox {
  // }
  .iconStyle {
    color: var(--primary);
    margin-right: 8px;
  }
}
.settingcolor {
  color: var(--primary);
  cursor: pointer;
}
.employee-selector-wrapper2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .employee-selector-block {
    width: 400px;
    .employee-selector-title {
      width: 100%;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
    }
    .employee-selector {
      height: 400px;
      margin-top: 20px;
      padding-right: 20px;
      overflow: auto;
      .employee-selector-item {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
      }
    }
  }
  .employee-selector-block2 {
    margin-left: 30px;
    width: 100%;
    background-color: #f4f6fa;
    border-radius: 8px;
    padding: 15px;
    .employee-selector-item2 {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .employee-selector-title {
      width: 100%;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
    }
    .employee-selector {
      height: 500px;
      margin-top: 20px;
      padding-right: 10px;
      overflow: auto;
      .employee-selector-item {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
      }
    }
  }
}
.tree-item2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  margin-top: 20px;
  margin-bottom: 20px;
}
.tree-item {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  margin-top: 10px;
}
</style>
